basic HTML

HTML(Hyper Text Markup Language)はWEBページを作成するための言語である．

• 初めてのWEBページ
• b1: My First Page
• b2: リスト list
• b3: ネストリスト Nest list
• b4: テーブル table
• b5: CSSの背景色と文字色
• b6: CSSのリストマーカー

CSS and Bootstrap 5

IICA・IT2022 演習課題集 2022

CSS（Cascading Style Sheet）はWEBページのスタイルを，所謂ページをどのように装飾するかを指定するための言語である． 「Bootstrap 5」は複雑なHTMLやCSSを記述しなくとも，簡単にWEBページをデザインできるフレームワーク「Bootstrap」の最新版． Bootstrap 5では，これまで依存してきたJavaScriptライブラリのjQueryがついに不要になった．

この節では，cssとBootstrap 5を学び，同時にWEBページのデザインを実践する．

• c1: color
• c2: image
• c3: box model and Bootstrap 5 card
• c4: Bootstrap 5 navbar
  1. collapsible navbar
  2. navbar with dropdown
• c5: Bootsrap 5 carousel
• c6: animation
  1. transition and gradient
  2. image and 2D animation
  3. 3D rotation
• c7:「ふるさと自慢・九州沖縄編」ver.2021/8

Bootstrap 5 GUI & JavaScript Event Processing & PHP

　JavaScriptは「ブラウザ上」で動作するプログラミング言語で，データの保存やファイルへの書き込みができない. 対してPHPは通常「パソコン」や「サーバー」で動作する言語で，WEBページ上のデータの保存やファイルへの書き込みなどができる．

　この節では，Bootstrap 5を用いたHTMLのGUIを利用しデータを入力してもらい，その入力をJavaScriptでリアルタイムに確認させ，その後データをPHPへ送信し，PHPは受信したデータを確保する情報収集・入力・登録といった処理方法を習う．

• GUI content:from bs1.html to bs7.html
• ☆for j1
  bs3: button and JavaScript response
• ☆for j2
  • BS5 collapsible navbar & carousel
  • BS5c7:ふるさと自慢～九州・沖縄編～ver.2021/11
• formによるテキスト入力と確認(html,JavaScript,php)
  1. ☆for j2
     form textarea → bs9.html
• Create a Toast ☆for j2
• Scrollspy ☆for j2
• formによるログイン認証受送信処理(html,php,ajax,jquery,JavaScript)
  1. ☆for j3
     Forms input and PHP → bs8.html
  2. Forms input and ajax(jquery) and PHP →　bs8.php
  3. ☆for j4
     Forms input and PHP action_self → bs8_self.php
• special contents: from bs10.html to bs33.html
1. ☆for j5
   • input(text) & JavaScript & PHP
   • PHP code
2. ★for j5
   • 宿泊予約登録① input(text,number,date) & JavaScript & PHP
   • PHP code①

3. ☆for j5
   • Select menu and JavaScript and PHP
   • PHP code

   • ★★★★実装例：誕生日のselect optionを動的に作成し年齢を計算する
     • JavaScript版

     • PHP版 PHP版code

4. ★★for j5
   • 宿泊予約登録② Input(text,date)+Select menu and JavaScript and PHP
   • PHP code②

5. ☆for j5
   • Datalist and JavaScript and PHP
   • PHP code
6. ☆for j5
   • Checkboxes and JavaScript and PHP
   • PHP code
7. ☆for j5
   • Radio button and JavaScript and PHP
   • PHP code

8. ★★★for j5
   • 宿泊予約登録③ Input(text,email,date)+Select menu+checkbox+radio button+textare and JavaScript and PHP
   • PHP code③
• Open a Toast
• Create a Offcanvas Sidebar
• Offcanvas Position

JavaScript and jquery

1. JavaScript 入門
   • What Can JavaScript Do?
   • JavaScriptの句と関数をどこに入れるか？
   • JavaScript Output 3つの出力方法

2. JavaScript特有のデザイン
   • Card shuffle　★JavaScript Array 初期化&シャッフル & タイマー
   • Memory game　★JavaScript Object Array& Arrow Function & Wait
   • Q&A game　★JavaScript Object Array & 関数制御
4. jquery(reference) 略
• j1: GUI &Event Processing(1)
• j2:GUI & Event Processing(2)
• j3:Canvas & Mouse Pen

project j5:
仮ECサイトの客情報登録ページ
の制作

評価ポイント

1. Bootstrap 5 GUIの利用
   1. input(text,date)
   2. select menu
   3. checkbox
   4. radio button
   5. textarea
2. グリッドに整合させる内容と項目の設計
3. PCとスマホ両方に対応できるレイアウト
4. 入力の不備やミスを入力画面にて，入力操作と同時に該当するエラーを指摘する
5. 入力したすべてのデータをPHPへ送信し表示する

制作例: 仮宿泊予約登録（入力，データ確認，データベースの登録と確認）

1. 宿泊予約登録ページの制作企画

2. ★★★★宿泊予約登録ページ

3. データベース確認ページ

4. ★★★★アカウント作成ページ(front only whithout DB operation)
   1. codeIDPW入力
   2. code情報入力
   3. code確認と登録